<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref
	} from "vue"

	const detailsObj = ref({})
	const photos = ref('')
	onLoad((query) => {
		detailsObj.value = query
		// 动态设置导航栏标题
		uni.setNavigationBarTitle({
			title: query.photo || '自定义'
		});
		photos.value = query.photo
	})


	// 点击拍照
	const phtotgraghClick = () => {
		uni.navigateTo({
			url: `/subpack-age/tests/index?photo=${photos.value}`
		})
	}

	const tabkeAPi = (url) => {

		uni.request({
			url: 'https://jmzjzzz.market.alicloudapi.com/id-phote/create',
			method: 'post',
			header: {
				'Authorization': "APPCODE c0f34a9047194c209d53d49566b502bf"
			},
			data: {
				url: url
			},
			success: (res) => {
				console.log(res)
			},
			fail: (err) => {
				console.log(err, 失败)
			}
		})
	}
	const albumClick = () => {
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: function(res) {
				console.log(res.tempFilePaths[0], 9999)
				// const url = JSON.stringify(res.tempFilePaths[0])
				// console.log(url,1111)
				tabkeAPi(res.tempFilePaths[0])
				uni.navigateTo({
					url: `/subpack-age/Processing/index?photo=${photos.value}&url=${res.tempFilePaths[0]}`
				})
			}
		});
	}
</script>
<template>
	<view class="details">

		<view class="details-logo">
			<image class="images" src="../../static/markNow.png" alt="Description"></image>
			<view class="select">选择白色（纯色）背景，勿戴首饰！</view>
		</view>
		<view class="photograph" @click="phtotgraghClick">
			拍照
		</view>
		<view class="album" @click="albumClick">
			从相册中选择
		</view>
	</view>
</template>

<style scoped lang="scss">
	.details {
		width: 100%;
		height: 100%;

		.photograph {
			width: 600rpx;
			height: 120rpx;
			background: linear-gradient(90deg, #3A7CF8 0%, #3AAFF8 100%);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 120rpx;
			text-align: center;
			font-style: normal;
			margin: 100rpx 75rpx 0;
		}

		.album {
			width: 600rpx;
			height: 120rpx;
			background: #EFF3FE;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			border: 2rpx solid #3A7CF8;
			font-weight: 600;
			font-size: 32rpx;
			color: #3A7CF8;
			line-height: 120rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			margin: 32rpx 75rpx 0;

		}

		.details-logo {
			position: relative;
			width: 100%;
			height: 800rpx;
			background-color: aqua;

			.select {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 750rpx;
				height: 80rpx;
				background: rgba(58, 124, 248, 0.6);
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}

			.images {
				width: 750rpx;
				height: 100%;
			}
		}
	}
</style>